<template>
    <div class="tasklistContent">
        <div class="tasklistBox">
            <h3 style="padding:0;margin: 0;">回评列表 <i class="el-icon-close"></i></h3>
            <div class="mytasklist">
                <span class="pytime">评阅时间</span>
                <el-date-picker
                    v-model="dataTime"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
                <span class="pytime pytime1">打分区间</span>
                <div class="scoreRange">
                    <el-input v-model="questionDate.highScore" placeholder="最高分"></el-input>
                    <span>至</span>
                    <el-input v-model="questionDate.lowScore" placeholder="最低分"></el-input>
                </div>
                <el-button class="searchBtn" type="primary" @click="searchQuestionList">搜索</el-button>
            </div>
            <el-table
                :data="removelist"
                border
                stripe
                style="width: 100%"
                height="400">
                <el-table-column
                prop="questionNumbers"
                label="试题编号">
                </el-table-column>
                <el-table-column
                prop="score"
                label="分数">
                </el-table-column>
                <el-table-column
                prop="assignedTime"
                label="打分时间">
                </el-table-column>
                <el-table-column
                prop="address"
                label="操作">
                    <template slot-scope="scope">
                        <span class="startReview">回评</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page-bottom">
                <div class="sel-box">
                    <p>共 {{ total }} 条数据</p>
                </div>
                <pagination
                    v-show="total > 0"
                    :total="total"
                    :page.sync="questionDate.pageNum"
                    :limit.sync="questionDate.pageSize"
                    @pagination="getList"
                />
            </div>
        </div>
    </div>
</template>

<script>
import {assignmentReviewlist} from '@/api/mark/mark'
export default {
    props:['taskcontent'],
    data(){
        return{
            type:1,
            total:0,
            removelist:[],
            dataTime:'',
            questionDate:{
                pageNum:1,
                pageSize:10,
                hightScore:'',
                lowScore:'',
                startTime:'',
                endTime:'',
                teacherId:'',
                examId:'',
                assignmentConfigId:''
            }
        }
    },
    mounted(){
        this.getReviewlist()
    },
    methods: {
        tableRowClassName({ rowIndex }) {
            return rowIndex % 2 === 0 ? 'even-row' : 'odd-row';
        },
        //获取回评列表
        getReviewlist(){
            this.questionDate.teacherId = this.taskcontent.teacherId
            this.questionDate.examId = this.taskcontent.examId
            this.questionDate.assignmentConfigId = this.taskcontent.assignmentConfigId
            // console.info('this.questionDate.dataTime',this.questionDate)
            // return false
            assignmentReviewlist(this.questionDate).then(res=>{
                console.info(res)
                if(res.code==200){
                    this.removelist = res.rows
                    this.total = res.total
                }
            })
        },
        searchQuestionList(){
            if(this.dataTime.length>0){
                this.questionDate.startTime = this.dataTime[0]
                this.questionDate.endTime = this.dataTime[1]
            }
            this.getReviewlist()
        },
        getList(){
            this.getReviewlist()
        }
    }
}
</script>

<style scoped>
    >>> .el-table >>> .even-row {
        background-color: #FAFAFB;  /* 偶数行颜色 */
    }
    >>> .el-table >>> .odd-row {
        background-color: #ffffff;  /* 奇数行颜色 */
    }
    .tasklistContent{
        width:100%;
        height:100%;
        position:fixed;
        left:0;
        top:0;
        background:rgba(0,0,0,0.7);
        z-index:1000;
    }
    .tasklistBox{
        width: 1040px;
        height: 584px;
        background: #FFFFFF;
        box-shadow: 0 4px 16px 0 #5572921a;
        position:absolute;
        left:50%;
        top:50%;
        transform: translate(-50%,-50%);
        padding:24px;
        position:relative;
    }
    .mytasklist{
        display: flex;
        align-items: center;
        justify-content:left;
        font-size:14px;
        color:#333;
        margin:15px 0;
    }
    .mytasklist i{
        font-style: normal;
        display: inline-block;
        padding:0 8px;
        color:#1A48DB;
    }
    >>> .el-table th.el-table__cell > .cell{
        text-align: center;
    }
    >>> .el-table--enable-row-transition .el-table__body td.el-table__cell{
        text-align: center;
    }
    .buttconbox{
        display: flex;
        align-items: center;
        position:absolute;
        left:30px;
        bottom:30px;
    }
    .buttconbox span,.buttconbox b{
        display: inline-block;
        width: 124px;
        height: 34px;
        border-radius: 10px;
        font-size:14px;
        cursor: pointer;
        text-align: center;
        line-height:34px;
    }
    .buttconbox span{
        background: #1A48DB;
        color:#fff;
    }
    .buttconbox b{
        font-style:normal;
        background: #F2F6FB;
        border: 1px solid #1A48DB;
        color:#1A48DB;
        font-weight: normal;
        margin-left:24px;
    }
    .spanred,.spanblue,.spangreen,.spangray{
        display: inline-block;
        width: 76px;
        height: 22px;
        border-radius: 6px;
        text-align:center;
        line-height:22px;
        font-size:14px;
    }
    .spanred{
        background: #ec555a0f;
        border: 1px solid #ec555a80;
        color:#EC555A
    }
    .spanblue{
        background: #1a48db0f;
        border: 1px solid #1a48db80;
        color:#1A48DB;
    }
    .spangreen{
        background: #288f410f;
        border: 1px solid #288f4180;
        color:#288F41;
    }
    .spangray{
        background: #5b63710f;
        border: 1px solid #5b637180;
        color:#5B6371
    }
    .startReview{
        font-weight: 400;
        font-size: 14px;
        color: #1A48DB;
        text-decoration: underline;
        cursor: pointer;
    }
    .endReview{
        font-weight: 400;
        font-size: 14px;
        color: #5B6371
    }
    .scoreRange{
        background-color: #FFFFFF;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #606266;
        display: flex;
        font-size: inherit;
        height: 40px;
        line-height: 40px;
        outline: none;
        padding: 0 15px;
        align-items: center;
    }
    .scoreRange >>> .el-input__inner{
         width:100px;
         border:none;
         text-align: center;
    }
    .pytime{
        display: inline-block;
        margin-right:10px;
    }
    .pytime1{
        margin-left:25px;
    }
    .searchBtn{
        margin-left:20px;
    }
</style>